<template>
  <div>
  	<TopSwiper :tops="tops"></TopSwiper>
    <Card v-for="book of books" :key="book.id" :book='book'></Card>
    <p class="text-footer" v-if="!more">没有更多数据!</p>
  </div>
</template>
<script>
import {get} from '@/util'
import Card from '@/components/Card'
import TopSwiper from '@/components/TopSwiper'
export default {
  data: {
  	books: [],
  	page: 0,
  	more: true,
  	tops: []
  },
  components: {
  	Card,
  	TopSwiper
  },
  methods: {
    async getList (init) {
      if (init) {
        this.page = 0
        this.more = true
      }
      wx.showNavigationBarLoading()
      const books = await get('/weapp/bookList', {page: this.page})
      if (books.list.length < 10 && this.page > 0) {
        this.more = false
      }
      if (init) {
        this.books = books.list
        wx.stopPullDownRefresh()
      } else {
        // 下拉刷新，不能直接覆盖books，而是累加
        this.books = this.books.concat(books.list)
      }

      wx.hideNavigationBarLoading()
    },
    async getTop () {
      const tops = await get('/weapp/top')
      this.tops = tops.list
    }
  },
  onPullDownRefresh () {
    this.getList(true)
    this.getTop()
  },
  onReachBottom () {
    if (!this.more) {
    	// 没有更多了
    	return false
    }
    this.page += 1
    this.getList()
  },
  mounted () {
  	this.getList(true),
  	this.getTop()
  }

}
</script>

<style lang="scss" scoped>
.text-footer {
	text-align: center;
	font-size: 12px;
	margin-bottom: 5px;
}
</style>
